<template>
  <div class="box">
    <div class="list_box">
      <div class="navbar">
        <ul>
          <li :class="style == 0 ? 'nav_li' : ''" @click="handle(0)">
            <p>歌曲列表</p>
            <span></span>
          </li>
          <li :class="style == 1 ? 'nav_li' : ''" @click="handle(1)">
            <p>评论</p>
            <span></span>
          </li>
          <li :class="style == 2 ? 'nav_li' : ''" @click="handle(2)">
            <p>收藏者</p>
            <span></span>
          </li>
        </ul>
      </div>

      <div class="loading" v-show="loading">
        <i class="el-icon-loading"></i>
      </div>

      <div :class="style == 0 ? 'block' : 'none'" id="list1">
        <div class="list1_top"></div>

        <table class="list1_music">
          <tr class="h1">
            <th width="10%">操作</th>
            <th width="35%">标题</th>
            <th width="15%">歌手</th>
            <th width="15%">专辑</th>
            <th width="5%">时间</th>
          </tr>

          <tr
            v-for="(val, index) in datalist"
            :key="index"
            :class="(index + 1) % 2 == 0 ? 't1' : 't2'"
            @click="play(val.id)"
          >
            <td class="td1">
              <p>0{{ index + 1 }}</p>
              <i class="fa fa-heart-o" id="like"></i>
              <i class="el-icon-bottom" id="down"></i>
            </td>
            <td>
              <a class="collecttion" href="#">{{ val.name }}</a>
              <span v-if="val.sq == null ? false : true" class="sq">SQ</span>
            </td>
            <td>
              <p class="ar">
                <span
                  class="collecttion"
                  v-for="(item, index) in val.ar"
                  :key="index"
                  >{{ item.name }}</span
                >
              </p>
            </td>
            <td>
              <p class="collecttion">{{ val.al.name }}</p>
            </td>
            <td>
              <p>
                {{ formarSongsTime(val.dt) }}
              </p>
            </td>
          </tr>
        </table>
        <div class="block1"></div>
      </div>

      <div :class="style == 1 ? 'block' : 'none'" id="list2">2</div>

      <div :class="style == 2 ? 'block' : 'none'" id="list3">3</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: 0, // 点击改变样式
      datalist: [], // 搜索音乐到的数据
      loading: true, // 加载动画
      time: null
    }
  },
  mounted () {
    const name = this.$route.query.name
    this.initlist(name)
    this.$bus.$on('searchResult', (name) => {
      this.loading = true
      this.initlist(name)
    })
  },
  methods: {
    initlist (value) {
      clearTimeout(this.time)
      this.time = setTimeout(() => {
        this.getapi.search(value).then((res) => {
        // console.log(res.result.songs, 'zxcvbnm')
          this.datalist = res.result.songs
          this.$bus.$emit('song_count', res.result.songs.length)
          this.loading = false
        })
      }, 500)
    },
    handle (e) {
      this.style = e
    },
    play (e) {
      this.utils.playSong(e).then((res) => {
        this.$bus.$emit('play', res[0], res[1])
      })
    }
  },
  computed: {
    formarSongsTime () {
      return function (res) {
        return this.utils.formarSongsTime(res)
      }
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  margin-top: 25px;
}
.list_box {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.list_box .navbar {
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;

  margin: 0 auto;
}
.list_box .navbar ul {
  display: flex;
  align-items: center;
}
.navbar li {
  width: auto;
  height: 100%;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.navbar .nav_li span {
  width: 100%;
  height: 4px;
  display: block;
  background-color: #bf3e3e;
  position: relative;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}
.navbar .nav_li span {
  background-color: #ec4141;
}
.navbar .nav_li p {
  font-size: 1.25rem;
  font-weight: 700;
}
#menu_list {
  width: 100%;
  height: 300px;
  background-color: #d8d8d8;
}
.block {
  float: left;
  display: block;
}
.none {
  display: none;
}
</style>

<style scoped>
#list1 {
  width: 100%;
  height: 600px;
  background-color: white;
  margin: 0 auto;
}
.list1_music {
  width: 100%;
  height: 75px;
  border: 0;
}
.list1_music .h1 th {
  text-align: left;
}
.list1_music td,
th {
  height: 35px;
  border: 0;
}

.list1_music tr:hover {
  background-color: #f0f1f2;
}

.list1_music .t2 {
  background-color: #f9f9f9;
}
.list1_music .td1 p {
  float: left;
  margin-left: 15px;
  cursor: default;
  color: #d9d5d5;
}
.list1_music .td1 i {
  margin-left: 10px;
  color: #b7b7b7;
  font-size: 1.2rem;
}
.list1_music .td1 #down {
  font-size: 1.25rem;
}
.list1_music #like:hover {
  color: #535354;
}
.list1_music #down:hover {
  color: #535354;
}

.list1_music .sq {
  width: 25px;
  line-height: 12px;
  text-align: center;
  display: inline-block;
  border: 1px solid #ec4141;
  border-radius: 3px;
  color: #ec4141;
  margin-left: 10px;
  font-size: 0.9rem;
}
.list1_music td p,
a {
  margin-left: 15px;
  color: #656565;
  font-size: 0.9rem;
}
.list1_music .collecttion {
  width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list1_music .ar {
  width: 175px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
